import { Link } from '@brillout/docpress'
import { ConfigSpec } from '../../components'

<ConfigSpec
  env="server"
  global={null}
  isTypeOneLiner
>
`Record<string, string> {:ts}`
</ConfigSpec>

See also:

- <Link href="/redirect" noBreadcrumb={true} />
- <Link href="/render" noBreadcrumb={true} />

Permanent redirections (HTTP status code `301`):

```ts
// pages/+config.ts

import type { Config } from 'vike/types'

export default {
  redirects: {
    // Internal
    '/about-us': '/about',
    '/products/computer': '/produkte/komputer',

    // External
    '/chat': 'https://discord.com/invite/hfHhnJyVg8',
    '/mail': 'mailto:some@example.com',
    '/download': 'magnet:?xt=urn:btih:example',

    // Parameterized redirections
    '/product/@id': '/buy/@id',

    // Glob
    '/admin/*': '/private/*',

    // Glob + external
    '/admins/*': 'https://admin.example.org/*',
  }
} satisfies Config
```


## Alias

You can also use the `redirects` setting to alias links:

```ts
// pages/+config.ts

import type { Config } from 'vike/types'

export default {
  redirects: {
    '/mail': 'mail@example.org',
    '/donate': 'https://donate.stripe.com/9aiUAh021a',
    '/chat': 'https://discord.com/invite/hfHhnJyVg8'
  }
} satisfies Config
```

By default, these aliases only work when your share them on third-party websites (e.g. if you share `https://my-website.com/chat` on Discord or GitHub).

If you want to use these aliases also on your website, then update your `<Link>` implementation as shown below.

```ts
// components/Link/aliases.ts

export const aliases = {
  '/mail': 'mail@example.org',
  '/donate': 'https://donate.stripe.com/9aiUAh021a',
  '/chat': 'https://discord.com/invite/hfHhnJyVg8'
}
```

```ts
// components/Link.ts

import { aliases } from './Link/aliases'

function Link({ href }: { href: string }) {
  if (aliases[href]) href = aliases[href]
  // ...
}
```

```ts
// pages/+config.ts

import type { Config } from 'vike/types'
import { aliases } from '../components/Link/aliases'

export default {
  redirects: {
    ...aliases
  }
} satisfies Config
```

> As explained at <Link href="#client-navigation" />, the `redirects` setting doesn't work upon client-side navigation, that's why you have to implement it yourself on the client-side.
>
> See also: [#2376 - Setting `+redirects` improve alias support](https://github.com/vikejs/vike/issues/2376).


## Pre-rendering

See <Link href="/prerender#redirects" doNotInferSectionTitle />.


## Client navigation

The `+redirects` setting doesn't apply to <Link href="/client-routing">client-side navigation</Link>.

> To save client-side KBs, the `+redirects` setting isn't loaded on the client.

The `+redirects` setting is primarily intended for redirecting links living on external websites (third-party websites you don't control and can't update) that point to deprecated URLs.

Make sure to update internal links within your own website so they don't point to deprecated URLs.

## See also:

- <Link href="/redirect" />
- <Link href="/settings" />
